<template>
<h1>El-开关组件</h1>
  <el-switch v-model="value1"></el-switch>
  <el-switch
      v-model="value2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      ></el-switch>
  <hr>
  <el-switch v-model="value3" :active-value="1" :inactive-value="0"></el-switch>
  <el-switch v-model="value4" :active-value="'1'" :inactive-value="'0'" ></el-switch>
 <hr>
  <el-switch v-model="value5" :active-value="1" :inactive-value="0" @click="f"></el-switch>

</template>


<script setup>
import {ref} from "vue";

const value1 =ref(true);
const value2 =ref(false);
const value3 =ref(0);
const value4 =ref('0');
const value5 =ref(1);

//定义开关状态切换事件触发的方法
const f = () =>{
  console.log('开关状态切换事件触发了')
  console.log(value5.value,typeof value5.value);
}
</script>



<style scoped>

</style>